import React from "react";
import {Image, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import ChatListData from "../../../model/item/ChatListData";
import {ScreenDimensions} from "../../../libs/utils/ScreenDimensions";
import FileMessageComponent from "../../chatwin/FileMessageComponent";
import ImageMessageComponent from "../../chatwin/ImageMessageComponent";
import TextMessageComponent from "../../chatwin/TextMessageComponent";
import {SimpleDateFormat} from "../../../libs/utils/SimpleDateFormat";
import {globalStore} from "../../../libs/ShareStore";
import {Resource} from "../../../resource/Resource";


type ChatListItemPropTypes = {
    avatar:string,
    name:string,
    body:string,
    createTime:string,
    toMe:number,

    data:ChatListData,
}

type ChatListItemStateTypes = {

}

export default class ChatListItem extends React.Component<ChatListItemPropTypes, ChatListItemStateTypes> {
    constructor(props:ChatListItemPropTypes, context:any) {
        super(props, context);
    }

    componentDidMount(): void {
    }


    pressItem(){
    }

    render() {
        // type === 'TEXT'
        let msgView = <TextMessageComponent text={this.props.data.body.body} toMe={this.props.toMe} />;
        if(this.props.data.type === 'IMAGE'){
            msgView = <ImageMessageComponent uri={this.props.data.body.body} toMe={this.props.toMe} />;
        }
        else if(this.props.data.type === 'FILE'){
            msgView = <FileMessageComponent data={this.props.data} name={this.props.data.body.name} fileSize={this.props.data.body.size} initialProgress={0} fileIdUploading={this.props.data.fileIdUploading} toMe={this.props.toMe} />
        }
        let userMessageView:any;
        if(globalStore.chatsContent.select === 'room'){
            userMessageView =
                <View>
                    <View style={[chatWinItemStyles.container,{flexDirection:this.props.toMe === 1 ? 'row' : 'row-reverse'}]}>
                        <Image style={chatWinItemStyles.avatar} source={!this.props.avatar ? Resource.demo_header : {uri:this.props.avatar}} />
                        <View style={{flexDirection:'column'}}>
                            <View style={chatWinItemStyles.nameContainer}><Text style={{textAlign:this.props.toMe === 1 ? 'left' : 'right'}}>{this.props.data.fromUserName}</Text></View>
                            <View style={chatWinItemStyles.msgContainer}>
                                {msgView}
                            </View>
                        </View>
                        <View style={chatWinItemStyles.keepMsg} />
                    </View>
                    <Text style={chatWinItemStyles.messageTime}>{SimpleDateFormat.formatDateStr(this.props.data.createTime, 'MM-dd hh:mm')}</Text>
                </View>;
        }
        else {
            userMessageView =
                <View>
                    <View style={[chatWinItemStyles.container,{flexDirection:this.props.toMe === 1 ? 'row' : 'row-reverse'}]}>
                        <Image style={chatWinItemStyles.avatar} source={!this.props.avatar ? Resource.demo_header : {uri:this.props.avatar}} />
                        <View style={chatWinItemStyles.msgContainer}>
                            {msgView}
                        </View>
                        <View style={chatWinItemStyles.keepMsg} />
                    </View>
                    <Text style={chatWinItemStyles.messageTime}>{SimpleDateFormat.formatDateStr(this.props.data.createTime, 'MM-dd hh:mm')}</Text>
                </View>;
        }

        return (
            <TouchableOpacity activeOpacity={1} onPress={() => this.pressItem()}>
                {userMessageView}
            </TouchableOpacity>
        );
    }
}

 const chatWinItemStyles = StyleSheet.create({
     container: {
         flexDirection:'row',
         borderWidth: ScreenDimensions.minBorderWidth,
         borderColor:'#EAEDF6'
     },

     avatar:{
         width: 39,
         height:39,
         borderRadius:19.5
     },

     nameContainer: {
         marginLeft:9,
         marginRight:9
     },
     msgContainer: {
         marginLeft:9,
         marginRight:9,
         flex:80
     },
     keepMsg: {
         flex:20
     },
     messageTime:{
         fontSize:11,
         color:'#999',
         textAlign: 'center',
         marginTop:18,
         marginBottom:18,
     },
 });
